<template>
	<view class="extend">
		<scroll-view class="scrollView" scroll-x="true" :scroll-with-animation="true" enable-flex="true"
			:scroll-into-view="`sub${scrollId}`" v-if="true">
			<view :class="scrollId==index?'scrollItem font14 bold activeScroll':'scrollItem font14'" :id="`sub${index}`"
				v-for="(item,index) in subCategory" :key="index" @click.stop="clickScrollItem(item,index)">{{item.title}}</view>
		</scroll-view>
		<!-- 团队管理 -->
		<view class="member" v-if="scrollId==0">
			<view v-if="superior" class="flex alignCenter justConBetween memberOne">
				<view class="flex alignCenter">
					<image class="avatar" :src="superior.avatar" mode="aspectFill"></image>
					<view class="font14">
						<view class="hiddenOneline">{{superior.nickname}}</view>
						<view class="colorccc tel">{{superior.phoneNumber}}</view>
					</view>
				</view>
			</view>
			<view class="flex alignCenter justConBetween memberOne" v-for="(item,index) in memberData" :key="index"
				@click="memberClick('member',item)">
				<view class="flex alignCenter">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="font14">
						<view class="hiddenOneline">{{item.nickname}}</view>
						<view class="colorccc tel">{{item.phoneNumber}}</view>
					</view>
				</view>
				<view :class="inviteCode === item.userId ? 'meColor' :'colorMain'" class="font14 text-right"
					v-if="item.profitsRateStrs">
					分润比例
				</view>
			</view>
			<uni-nodata :iconStyle="{'margin':'100rpx 0 0'}" v-if="memberData.length==0"></uni-nodata>
		</view>
		<!-- 专属id -->
		<view class="onlyMe" v-if="scrollId==1">
			<!-- app邀请码 -->
			<!-- <view class="copyInviteCode font12 flex alignCenter">
				<view class="flex alignCenter">
					<view class="">{{inviteCode}}</view>
					<view class="" @click="copyClick">复制APP邀请码</view>
				</view>
			</view> -->
			<!-- 专属码 -->
			<view class="ownerCode" v-if="(wxUrl && appUrl)">
				<view class="flex alignCenter font14 justConAround">
					<view class="" @click="downloadClick('wx',wxUrl)">
						<image :src="wxUrl" mode="widthFix"></image>
						<view class="">下载小程序专属码</view>
					</view>
				<!-- 	<view class="" @click="downloadClick('app',appUrl)">
						<image :src="appUrl" mode="widthFix"></image>
						<view class="">下载APP专属二维码</view>
					</view> -->
				</view>
			</view>
			<!-- 海报 -->
			<view class="poster" v-if="posterArr.length>0">
				<!-- <view class="font14">请选择海报，生成您的专属海报</view> -->
				<view class="posterBox flex alignCenter" :style="{'text-align':posterArr.length==1?'center':'left'}">
					<view class="posterOne" v-for="(item,index) in posterArr" :key="index">
						<image :src="item.blbPlacard" mode="aspectFill"></image>
						<view class="circle" @click="chooseClick(item)">
							<uni-icons :type="item.choose?'circle-filled':'circle'" :color="item.choose?'#F7DD5E':'#fff'" size="25"
								@click="chooseClick(item)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 团队业绩 -->
		<view class="score" v-if="scrollId==2">
			<view class="scoreOne" v-for="(item,index) in memberData" :key="index">
				<view class="flex alignCenter justConBetween">
					<view class="flex alignCenter font12">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="hiddenOneline">{{item.teamUserName}}<text class="font10">({{item.teamUserPhoneNumber}})</text>
						</view>
					</view>
					<view class="font10 color666" v-if="item.teamUserCreateTime">{{item.teamUserCreateTime}}</view>
				</view>
				<view class="flex scoreRate" v-for="(item2,idx) in item.profitProjectDetailList" :key="idx">
					<view class="font12 flex alignCenter">
						<view class="">
							<view class="">{{item2.projectName}}</view>
						</view>
					</view>
					<view class="flex alignCenter" v-if="item2.achievementMoney!=null">
						<view class="">
							<view class="font16">￥{{item2.achievementMoney}}</view>
							<view class="font12 color999">{{item.level == '主管' ? '直接业绩累计' : '业绩累计'}}</view>
						</view>
					</view>
					<view class="flex alignCenter" v-if="item2.shareRate!=null">
						<view class="">
							<view class="font16" style="color: rgb(255,155,4);">{{item2.shareRate}}%</view>
							<view class="font12 color999">分配比例</view>
						</view>
					</view>
					<view class="flex alignCenter" v-if="item.level == '员工'">
						<view class="">
							<view class="font16" style="color: rgb(255,155,4);">￥{{item2.managerRate }}%</view>
							<view class="font12 color999">主管比例</view>
						</view>
					</view>
					<view class="flex alignCenter" v-if="item2.profitMoney!=null">
						<view class="">
							<view class="font16" style="color: rgb(255,155,4);">{{item2.profitMoney}}%</view>
							<view class="font12 color999">提成比例</view>
						</view>
					</view>
				</view>
			</view>
			<uni-nodata :iconStyle="{'margin':'100rpx 0 0'}" v-if="memberData.length==0"></uni-nodata>
		</view>
		<!-- 客户管理 -->
		<view class="extendUser" v-if="scrollId==3">
			<!-- 下属显示 -->
			<view class="bg-white" v-if="sonInfo.sonList && sonInfo.sonList.length">
				<view class="along">
					<view>属下团队的</view>
					<view class="flex align-center" @click="openSonAll" v-if="sonInfo.along">
						全部
						<u-icon class="u-m-l-5" name="arrow-right" size="20" color="#333333"></u-icon>
					</view>
				</view>
				<view v-for="(item,index) in sonInfo.sonList" :key="index" class="flex align-center w-100 u-p-35"
					@click="openUserExtendList(item)">
					<image :src="item.avatar" mode="aspectFill" class="avatar-list"></image>
					<view class="u-m-l-20">
						<view class="u-font-28 color333">{{item.nickname}}</view>
						<view class="u-m-t-20 u-font-24 color999">{{item.phoneNumber}}</view>
					</view>
					<u-icon class="ml-auto" name="arrow-right" size="20" color="#333333"></u-icon>
				</view>
			</view>
			<view style="height: 60rpx;" class="u-font-24 flex align-center u-p-l-35 u-p-r-35">我的客户</view>
			<view v-for="(item,index) in memberData" :key="index" class="flex align-center w-100 u-p-35 bg-white"
				@click="memberClick('user',item)">
				<image :src="item.avatar" mode="aspectFill" class="avatar-list"></image>
				<view class="u-m-l-20">
					<view class="u-font-28 color333">{{item.nickName}}</view>
					<view class="u-m-t-20 u-font-24 color999">{{item.phoneNumber}}</view>
				</view>
			</view>
			<!-- <view class="flex alignCenter memberOne" v-for="(item,index) in memberData" :key="index"
				@click="memberClick('user',item)">
				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="font14">
					<view class="hiddenOneline">{{item.nickName}}</view>
					<view class="colorccc tel">{{item.phoneNumber}}</view>
				</view>
			</view> -->
			<uni-nodata :iconStyle="{'margin':'100rpx 0 0'}" v-if="memberData.length==0"></uni-nodata>
		</view>
		<!--个性私域-->
		<view v-if="scrollId==4">
			<view class="lanmu" :style="{'--height':height,'--width':width}">
				<view class="tiao"></view>
				<view class="lanmutext" @click="cha">通用设置</view>
			</view>
			<view class="input1tishi" :style="{'--height':height,'--width':width}"><text
					class="xing">*</text>展示在择校报告,调剂报告、大学手册页眉</view>
			<view class="input1" :style="{'--height':height,'--width':width}">
				<image src="@/static/image/toolbox/edit.png" class="tu1"></image>
				<input class="input2" placeholder="团队或机构名称,默认显示info.alhelp.net" v-model="PersonalPrivateAreaInfo.institution"
					@blur="changePrivateInfoFn" />
			</view>
			
			<view class="input1tishi" :style="{'--height':height,'--width':width}"><text
					class="xing">*</text>展示在择校报告,调剂报告、大学手册页脚</view>
			<view class="input1" :style="{'--height':height,'--width':width}">
				<image src="@/static/image/toolbox/edit.png" class="tu1"></image>
				<input class="input2" placeholder="咨询人员电话,默认显示19969130447" v-model="PersonalPrivateAreaInfo.consultantPhone"
					@blur="changePrivateInfoFn" />
			</view>
			
			<view class="input1tishi" :style="{'--height':height,'--width':width}"><text class="xing">*</text>机构客户电话</view>
			<template v-if="!flag31">
				<view class="input1" :style="{'--height':height,'--width':width}">
					<image src="@/static/image/toolbox/edit.png" class="tu1"></image>
					<input class="input2" placeholder="机构客服人员电话,默认显示19969130447" v-model="customerPhone"
						@blur="PersonalQrCode('phone')" />
				</view>
			</template>
			
			<view class="input1tishi" :style="{'--height':height,'--width':width}"><text class="xing">*</text>小程序的名称</view>
			<view class="input1" :style="{'--height':height,'--width':width}">
				<image src="@/static/image/toolbox/edit.png" class="tu1"></image>
				<input :maxlength="5" class="input2" placeholder="小程序的名称,默认显示助查" v-model="PersonalPrivateAreaInfo.miniProgramName"
					@blur="changePrivateInfoFn" />
			</view>
			
			<view class="input1tishi" :style="{'--height':height,'--width':width}"><text class="xing">*</text>小程序的简介</view>
			<view class="input1" :style="{'--height':height,'--width':width}">
				<image src="@/static/image/toolbox/edit.png" class="tu1"></image>
				<input :maxlength="10" class="input2" placeholder="小程序的简介,默认显示考研择校上岸之神"
					v-model="PersonalPrivateAreaInfo.introductionMiniPrograms" @blur="changePrivateInfoFn" />
			</view>

			<view class="lanmu2" :style="{'--height':height,'--width':width}">
				<view class="tiao"></view>
				<view class="lanmutext">二维码</view>
			</view>
			<view class="erweima flex flex-wrap" :style="{'--height':height,'--width':width}">
				<view class="flex flex-column align-center  u-m-l-30 u-m-b-50">
					<view class="erweima1" @click="tianjia(0)">
						<image src="https://image.alhelp.net/uploads/20231104/4f0e70da3686154b6f82f82e1a320fd6.png" class="guanbi1"
							v-if="!flag1" @click.stop="removePicFn('cover')"></image>
						<image :src="PersonalPrivateAreaInfo.qrCode" v-if="!flag1" class="tu3"></image>
						<image src="@/static/image/icons/jia.png" class="tu2" v-if="flag1"></image>
					</view>
					<view class="text-center u-m-t-10">
						<view class="erweimatext">择校&调剂报告</view>
						<view class="erweimatext">封面二维码1</view>
					</view>
				</view>
				<view class="flex flex-column align-center  u-m-l-30 u-m-b-50">
					<view class="erweima1" @click="tianjia(1)">
						<image src="https://image.alhelp.net/uploads/20231104/4f0e70da3686154b6f82f82e1a320fd6.png" class="guanbi1"
							v-if="!flag2" @click.stop="removePicFn('logo')"></image>
						<image :src="PersonalPrivateAreaInfo.institutionLogo" v-if="!flag2" class="tu3"></image>
						<image src="@/static/image/icons/jia.png" class="tu2" v-if="flag2"></image>
					</view>
					<view class="text-center u-m-t-10">
						<view class="erweimatext">Logo</view>
					</view>
				</view>
				<view class="flex flex-column align-center  u-m-l-30 u-m-b-50" v-if="isUpload">
					<view class="erweima1" @click="PersonalQrCode('yl')">
						<template v-if="privateqrcodeUrl">
							<image src="https://image.alhelp.net/uploads/20231104/4f0e70da3686154b6f82f82e1a320fd6.png"
								class="guanbi1" @click.stop="removePicFn('private')"></image>
							<image :src="privateqrcodeUrl" class="tu3"></image>
						</template>
						<template v-else>
							<image src="@/static/image/icons/jia.png" class="tu2"></image>
						</template>
						<image src="@/static/image/icons/suo.png" class="suo" v-if="flag31"></image>
					</view>
					<view class="text-center u-m-t-10">
						<view class="erweimatext">择校&调剂</view>
						<view class="erweimatext">引流私域二维码2</view>
					</view>
				</view>
				<view class="flex flex-column align-center  u-m-l-30 u-m-b-50" v-if="isUpload">
					<view class="erweima1" @click="PersonalQrCode('kf')">
						<template v-if="serveQrcodeUrl">
							<image src="https://image.alhelp.net/uploads/20231104/4f0e70da3686154b6f82f82e1a320fd6.png"
								class="guanbi1" @click.stop="removePicFn('kf')"></image>
							<image :src="serveQrcodeUrl" class="tu3"></image>
						</template>
						<template v-else>
							<image src="@/static/image/icons/jia.png" class="tu2"></image>
						</template>
						<image src="@/static/image/icons/suo.png" class="suo" v-if="flag31"></image>
					</view>
					<view class="text-center u-m-t-10">
						<view class="erweimatext">客服二维码</view>
					</view>
				</view>
				<view class="flex flex-column align-center  u-m-l-30 u-m-b-50" v-if="isUpload">
					<view class="erweima1" @click="PersonalQrCode('zb')">
						<template v-if="liveQRCode">
							<image src="https://image.alhelp.net/uploads/20231104/4f0e70da3686154b6f82f82e1a320fd6.png"
								class="guanbi1" @click.stop="removePicFn('zb')"></image>
							<image :src="liveQRCode" class="tu3"></image>
						</template>
						<template v-else>
							<image src="@/static/image/icons/jia.png" class="tu2"></image>
						</template>
						<image src="@/static/image/icons/suo.png" class="suo" v-if="flag31"></image>
					</view>
					<view class="text-center u-m-t-10">
						<view class="erweimatext">直播间二维码</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加成员 -->
		<view class="fixedBottomBtn" v-if="scrollId==0" @click="addNew"><text class="focusMargin">+</text>添加直接下属</view>
		<!-- 生成海报 -->
		<view class="fixedBottomBtn font12" v-if="scrollId==1" @click="makePoster">生成专属海报</view>
		<!-- 现金收益 -->
		<view class="nowMoney" v-if="scrollId==2">
			<view class="flex align-center justify-between bottomArea">
				<view class="money">
					<view>
						现金收益：￥{{totalMoney}}
					</view>
					<!-- 	<view>
						激活码收益：￥600
					</view> -->
				</view>
				<view class="btns">
					<view class="record" @click="openRecord">提现记录</view>
					<view class="Withdrawal" @click="withdrawal">申请提现</view>
				</view>
			</view>
		</view>
		<!-- 团队成员的操作（底部蒙层） -->
		<view class="memberLayer" v-if="showMemberLayer">
			<view class="memberOperMain">
				<view class="font14" v-for="(item,index) in operList" :key="index" @click="operClick(item)">{{item.title}}
				</view>
				<view class="font14 cancel" @click="cancelOper">取消</view>
			</view>
		</view>
		<!-- 添加、编辑团队成员（垂直居中蒙层） -->
		<view class="memberRate flex alignCenter" v-if="showMemberRate">
			<view class="memberRateMain">
				<view class="font16 rateTitle">{{isEdit?'编辑':'添加'}}下属</view>
				<view class="text-warning font14">将从你的提成金额中分配给他一定的比例</view>
				<input class="font12 color333" v-model="tel" type="number" maxlength="11" placeholder="请输入手机号(请确保对方手机号已经注册)">
				<view class="font12 color666 tip">*请输入Ta的分配比例,0-100的整数</view>

				<template v-if="cateObj.dataMemberIndividualRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">数据会员（个人）</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.dataMemberIndividualRate" type="number"
							maxlength="3" placeholder="%">
					</view>
					<view class="font12 color666 tip">*个人卡日卡、周卡、月卡 数学通会员</view>
				</template>
				<template v-if="cateObj.dataMemberEnterpriseRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">数据会员（企业）</view>
						<input :disabled="disabled" v-model="rateForm.dataMemberEnterpriseRate" type="number" maxlength="3"
							placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.dataMemberSchoolRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">数据会员（校园卡）</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.dataMemberSchoolRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.chooseAdjustIndividualRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">择校&调剂数据（个人）</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.chooseAdjustIndividualRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.chooseAdjustEnterpriseRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">择校&调剂数据（企业）</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.chooseAdjustEnterpriseRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.chooseAdjustCommonRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">择校&调剂普通班</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.chooseAdjustCommonRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.chooseAdjustUpmarketRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color666 rateItemTitle">择校&调剂高端班</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.chooseAdjustUpmarketRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<template v-if="cateObj.advertisingSharingRate">
					<view class="font12 flex alignCenter rateItem">
						<view class="color999 rateItemTitle">广告分润</view>
						<input class="color333" :disabled="disabled" v-model="rateForm.advertisingSharingRate" type="number"
							maxlength="3" placeholder="%">
					</view>
				</template>
				<view v-if="!disabled" class="flex alignCenter font14 rateOperBox">
					<view class="" @click="cancelClick">取消</view>
					<view class="colorMain" @click="sureClick">确定</view>
				</view>
				<view v-if="disabled" class="flex alignCenter font14 rateOperBox">
					<view class="" @click="cancelClick">关闭</view>
				</view>
			</view>
		</view>
		<my-modal @closeFn='()=>{showMyModal =false}' v-show="showMyModal">
			<view class="title" style="font-size: 30rpx; font-weight: 700;">
				<img src="https://image.alhelp.net/uploads/20231104/cb6849e65f2348ea13f79199d406aab5.png" alt=""
					style="width: 30rpx;height: 30rpx;margin-right: 10rpx;">
				快速引流到私域流量群,开通权限仅需<text style="color: #fed534;">{{priceLock}}</text>元！
			</view>
			<view class="img" style="width: 368rpx;height: 736rpx;margin-top: 20rpx;">
				<img src="https://image.alhelp.net/uploads/20231104/7e2ebc50f0fc024639fec8c7b6bfdb2b.png" alt=""
					style="width: 100%;height: 100%;">
			</view>
			<view class="bottom_btn"
				style="margin-top: 20rpx;background-color: #f7dd5e;display: flex;justify-content: center;align-items: center;width: 300rpx;height: 80rpx;border-radius: 200rpx;">
				<img src="https://image.alhelp.net/uploads/20231104/57defd8800d56dae341f5767ba81237e.png" alt=""
					style="width: 50rpx;height: 40rpx;margin-right: 10rpx;">
				<text style="font-size: 36rpx;" @click="payFn">立即开通</text>
			</view>

		</my-modal>
		<!-- 提交成功 -->
		<view class="layer" v-if="showLayer">
			<view class="font14 layerMain">
				<view class="font18 bold layerTitle">提交成功！</view>
				<view class="">我们将在<text class="bold font16">3</text>个工作日内，处理您的申请。如有疑问，请添加客服微信</view>
				<view class="">
					<image src="https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png" mode="widthFix">
					</image>
				</view>
				<view class="noWidthBtn">复制微信号</view>
				<uni-icons class="close" color="#fff" type="clear" size="40" @click="showLayer=false"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberList,
		editRate,
		addMember,
		getPoster,
		extendList,
		ownerCodeList,
		memberScore,
		siyu1,
		checkIsLockApi,
		payPrivateApi,
		changePrivateInfoApi,
		uploadOrChangePrivateQRcodeApi,
		getPersonRun,
		queryParentFlower,
		exitTeam,
		querySonFlower
	} from "@/api/mine.js"
	import {
		mobile,
		Integer
	} from "@/utils/verification.js"
	import {
		requestAndroidPermission,
		uploadFile
	} from "@/utils/common.js"
	import {
		myModal
	} from '../components/my-modal/index.vue'
	import {
		queryGoodAllById,
	} from "@/api/toolbox.js"
	export default {
		components: {
			myModal
		},
		data() {
			return {
				activeId:null,
				customerPhone: "",
				miniProgramName: "", //小程序的名称
				introductionMiniprograms: "", //小程序的简介
				priceLock: 0,
				isUpload: true,
				sonInfo: {
					along: false, //是否超过三条
					sonList: []
				},
				disabled: false, //是否为只读
				superior: null,
				showLayer: false,
				cateObj: {
					dataMemberIndividualRate: null,
					dataMemberEnterpriseRate: null,
					dataMemberSchoolRate: null,
					chooseAdjustIndividualRate: null,
					chooseAdjustEnterpriseRate: null,
					chooseAdjustCommonRate: null,
					chooseAdjustUpmarketRate: null,
					advertisingSharingRate: null
				},
				qrcodeCoverUrl: '',
				privateqrcodeUrl: '',
				serveQrcodeUrl: '',
				liveQRCode: "",
				showMyModal: false,
				scrollId: '0',
				chooseSub: '',
				subCategory: [{
					title: '团队管理'
				}, {
					title: '专属id'
				}, {
					title: '团队业绩'
				}, {
					title: '客户管理'
				}, {
					title: '个性私域'
				}],
				page: 1,
				pageSize: 10,
				pageTotal: 0,
				memberData: [],
				operList: [{
					title: 'Ta的下级'
				}, {
					title: '拨打电话'
				}, {
					title: '查看'
				}, {
					title: '编辑'
				}],
				chooseMember: '',
				showMemberLayer: false,
				showMemberRate: false,
				tel: '',
				rateForm: {
					dataMemberIndividualRate: "",
					dataMemberEnterpriseRate: "",
					dataMemberSchoolRate: "",
					chooseAdjustIndividualRate: "",
					chooseAdjustEnterpriseRate: "",
					chooseAdjustCommonRate: "",
					chooseAdjustUpmarketRate: "",
					advertisingSharingRate: ""
				},
				scrollHeight: 0,
				isEdit: false,
				posterArr: [],
				inviteCode: '',
				proRateArr: [],
				wxUrl: '',
				appUrl: '',
				totalMoney: 0,
				width: 0,
				height: 0,
				PersonalPrivateAreaInfo: {},
				flag1: false,
				flag2: false,
				flag21: false,
				flag3: true,
				flag31: true,
				src: ["/static/image/icons/wechat.png", "/static/image/icons/wechat.png", "/static/image/icons/suo.png"],
				qrCode: "",
				PrivateQRcodeID: '',
			}
		},
		onLoad() {
			this.inviteCode = uni.getStorageSync('userId')
			let a = uni.getWindowInfo()
			this.width = a.screenWidth
			this.height = a.screenHeight
			this.getList()
			getPersonRun().then(res => {
				if (res.code === 100000) {
					let obj = res.data[0];
					console.log('obj: ',obj);
					if(obj){
						for (let key in this.cateObj) {
							this.cateObj[key] = obj[key] || '';
						}
					}
				}
			})
		},
		methods: {
			openSonAll() {
				uni.navigateTo({
					url: '/pages/mine/sonList/sonList',
				});
			},
			//打开下级推广列表
			openUserExtendList(row) {
				uni.navigateTo({
					url: `/pages/mine/extend/userExtendList/userExtendList?name=${row.nickname}&userId=${row.userId}`
				})
			},
			//退出团队
			exit(row) {
				uni.showModal({
					title: '提示',
					content: '确认退出团队？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							exitTeam().then(result => {
								if (result.code == 100000) {
									uni.showToast({
										title: '退出团队成功！',
										icon: 'none'
									});
									this.getList();
								}
							})
						}
					},
				});
			},
			//打开提现记录
			openRecord() {
				uni.navigateTo({
					url: '/pages/mine/wallet/list/index',
				});
			},
			//申请提现按钮
			withdrawal() {
				uni.navigateTo({
					url: '/pages/mine/wallet/wallet?type=3',
				});
				// this.showLayer = true
			},
			async removePicFn(i) {
				if (i == 'cover') {
					// 点击的封面二维码图片删除
					this.PersonalPrivateAreaInfo.qrCode = null
					this.flag1 = true
					await this.changePrivateInfoFn(this.PersonalPrivateAreaInfo)
				} else if (i == 'logo') {
					this.PersonalPrivateAreaInfo.institutionLogo = null
					this.flag2 = true
					await this.changePrivateInfoFn(this.PersonalPrivateAreaInfo)
				} else if (i == 'kf') {
					this.serveQrcodeUrl = null;
					this.flag3 = true
					await uploadOrChangePrivateQRcodeApi({
						id: this.PrivateQRcodeID,
						customer: ''
					})
				}else if (i == 'zb'){
					this.liveQRCode = null;
					await uploadOrChangePrivateQRcodeApi({
						id: this.PrivateQRcodeID,
						liveQRCode: ''
					})
				} else {
					this.privateqrcodeUrl = null
					this.flag3 = true
					await uploadOrChangePrivateQRcodeApi({
						id: this.PrivateQRcodeID,
						url: ''
					})
				}
			},
			async changePrivateInfoFn() {
				const res = await changePrivateInfoApi(this.PersonalPrivateAreaInfo);
			},
			payFn() {
				let that = this
				payPrivateApi({
						"goodsId": "37", //固定参数
						"goodsType": 14, //固定参数
						"payWay": 1, //固定参数
						"payProduct": 1, //1是小程序 2是app 不固定
					})
					.then(res => {
						let wechatRes = res.data.wechatPayResponse
						uni.requestPayment({
							appid: wechatRes.appid,
							provider: 'wxpay',
							timeStamp: wechatRes.timeStamp,
							nonceStr: wechatRes.noncestr,
							package: wechatRes.packageStr,
							signType: 'RSA',
							paySign: wechatRes.sign,
							success: function(res) {
								that.showMyModal = false
								that.flag31 = false
							},
							fail: function(err) {
								that.showMyModal = false
							}
						});
					})
			},
			cha() {
			},
			tianjia(value) {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: async (res) => {
						const {
							url
						} = await uploadFile(res.tempFilePaths)
						if (value == 1) {
							this.PersonalPrivateAreaInfo.institutionLogo = url;
							this.flag2 = false;
						} else {
							this.PersonalPrivateAreaInfo.qrCode = url;
							this.flag1 = false;
						}
						await this.changePrivateInfoFn(this.PersonalPrivateAreaInfo)
					},complete(err) {
						console.log('err: ',err);
					}
				})

			},
			PersonalQrCode(key) {
				if (this.flag31) {
					queryGoodAllById({
						id: 37
					}).then(res => {
						if (res.code == 100000) {
							this.priceLock = res.data.price;
							this.showMyModal = true
						}
					})
				} else {
					if (key === 'phone') {
						uploadOrChangePrivateQRcodeApi({
							id: this.PrivateQRcodeID ? this.PrivateQRcodeID : null,
							customerPhone: this.customerPhone
						})
					} else {
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: async (res) => {
								const {
									url
								} = await uploadFile(res.tempFilePaths)
								let obj = {};
								if (key == 'yl') {
									obj.url = url;
								} else if (key == 'zb') {
									obj.liveQRCode = url;
								} else {
									obj.customer = url;
								}
								uploadOrChangePrivateQRcodeApi({
									id: this.PrivateQRcodeID ? this.PrivateQRcodeID : null,
									...obj
								}).then(res => {
									if (key == 'yl') {
										this.privateqrcodeUrl = res.data;
									} else if (key == 'zb') {
										this.liveQRCode = res.data;
									} else {
										this.serveQrcodeUrl = res.data;
									}
								})
							}
						})
					}

				}
			},
			initPage() {
				this.page = 1;
				this.memberData = [];
			},
			// 获取列表
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let param = {
					size: this.page,
					pageSize: this.pageSize,
				}
				if (this.scrollId == 0) {
					queryParentFlower().then(res => {
						if (res.code == 100000) {
							this.superior = res.data.id ? res.data : null;;
							memberList(param).then((res) => {
								uni.hideLoading()
								if (res.code == 100000) {
									this.memberData = this.memberData.concat(res.data.data)
									this.sonInfo.along = Number(res.data.total) > 4;
									if (this.page == 1) {
										if (res.data.data.length <= 4) {
											this.sonInfo.sonList = JSON.parse(JSON.stringify(this.memberData.slice(1)));
										} else {
											this.sonInfo.sonList = JSON.parse(JSON.stringify(this.memberData.slice(1, 3)));
										}
									}
									this.pageTotal = Math.ceil(res.data.total / this.pageSize)
								}
							}).catch((err) => {
								uni.hideLoading()
							})
						}
					})
					return
				} else if (this.scrollId == 2) {
					memberScore(param).then((res) => {
						uni.hideLoading()
						if (res.code == 100000) {
							this.memberData = this.memberData.concat(res.data)
							this.pageTotal = Math.ceil(res.data.total / this.pageSize)
							this.totalMoney = res.msg
						}
					}).catch((err) => {
						uni.hideLoading()
					})
					return
				} else if (this.scrollId == 3) {
					param.userId = uni.getStorageSync('userId')
					extendList(param).then((res) => {
						uni.hideLoading()
						if (res.code == 100000) {
							this.memberData = this.memberData.concat(res.data.rows)
							this.pageTotal = Math.ceil(res.data.total / this.pageSize)
						}
					}).catch((err) => {
						uni.hideLoading()
					})
					return
				}
			},
			// tab切换
			clickScrollItem(item, idx) {
				this.chooseSub = item
				this.scrollId = idx
				if (idx != 4) {
					if (idx != 1) {
						this.initPage()
						this.getList()
					} else {
						this.getCodeList()
						this.getAllPoster()
					}
				} else {
					checkIsLockApi().then(res => {
						this.isUpload = !!res.data;
						if (!res.data) return;
						this.PrivateQRcodeID = res.data.id;
						this.privateqrcodeUrl = res.data.url;
						this.serveQrcodeUrl = res.data.customer;
						this.liveQRCode = res.data.liveQRCode || '';
						this.customerPhone = res.data.customerPhone;
						this.miniProgramName = res.data.miniProgramName || '';
						this.introductionMiniPrograms = res.data.introductionMiniPrograms || '';
						this.flag31 = res.data.isLock
						this.flag3 = this.privateqrcodeUrl ? false : true
					})
					siyu1().then((res) => {
						this.PersonalPrivateAreaInfo = res.data
						this.flag1 = !this.PersonalPrivateAreaInfo.qrCode
						this.flag2 = !this.PersonalPrivateAreaInfo.institutionLogo;
					})
				}
			},
			getCodeList() {
				ownerCodeList().then((res) => {
					if (res.code == 100000) {
						this.wxUrl = res.data.xiaoUrl
						this.appUrl = res.data.appUrl
					}
				})
			},
			// 复制邀请码
			copyClick() {
				uni.setClipboardData({
					data: this.inviteCode,
					showToast: false,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			// 获取海报列表
			getAllPoster() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getPoster({
					projectId: 3
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						res.data.forEach((item) => {
							item.choose = false
						})
						this.posterArr = res.data
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 选择海报
			chooseClick(item) {
				this.posterArr.forEach((val) => {
					val.choose = false
				})
				item.choose = true
			},
			// 生成海报
			makePoster() {
				let choosePoster = this.posterArr.filter((val) => val.choose)
				if (choosePoster.length == 0) {
					uni.showToast({
						title: '请选择海报样式',
						icon: 'none'
					})
					return
				}
				let query = {
					inviteType: 7,
					posterUrl: choosePoster[0].blbPlacard
				}
				uni.navigateTo({
					url: '/pages/school/share/share?query=' + JSON.stringify(query)
				})
			},
			memberClick(type, item) {
				this.chooseMember = item
				if (this.inviteCode == item.userId) {
					this.operList = [{
						title: '我的下级'
					}, {
						title: '查看'
					}]
				} else {
					this.operList = [{
						title: 'Ta的下级'
					}, {
						title: '拨打电话'
					}, {
						title: '编辑'
					}]
				}

				if (type == 'member') {
					this.showMemberLayer = true
				} else {
					uni.makePhoneCall({
						phoneNumber: item.phoneNumber
					});
				}
			},
			operClick(item) {
				if (item.title.indexOf('电话') != -1) {
					uni.makePhoneCall({
						phoneNumber: this.chooseMember.phoneNumber
					});
					return
				} else if (item.title.indexOf('删除') != -1) {
					uni.showModal({
						title: '提示',
						content: '确定删除该成员吗？',
						success: function(res) {
							if (res.confirm) {
								// TO DO
							} else if (res.cancel) {
							}
						}
					});
				} else if (item.title.indexOf('编辑') != -1) {
					Object.assign(this.$data.rateForm, this.$options.data().rateForm)
					this.isEdit = true
					this.tel = this.chooseMember.phoneNumber;
					if (this.chooseMember.profitsRate) {
						this.chooseMember.profitsRate.forEach((val) => {
							this.rateForm = {
								dataMemberIndividualRate: val.dataMemberIndividualRate,
								dataMemberEnterpriseRate: val.dataMemberEnterpriseRate,
								dataMemberSchoolRate: val.dataMemberSchoolRate,
								chooseAdjustIndividualRate: val.chooseAdjustIndividualRate,
								chooseAdjustEnterpriseRate: val.chooseAdjustEnterpriseRate,
								chooseAdjustCommonRate: val.chooseAdjustCommonRate,
								chooseAdjustUpmarketRate: val.chooseAdjustUpmarketRate,
								advertisingSharingRate: val.advertisingSharingRate
							}
						})
					}
					this.showMemberRate = true
				} else if (item.title.indexOf('查看') != -1) {
					this.disabled = true;
					Object.assign(this.$data.rateForm, this.$options.data().rateForm)
					this.isEdit = true
					this.tel = this.chooseMember.phoneNumber;
					if (this.chooseMember.profitsRate) {
						this.chooseMember.profitsRate.forEach((val) => {
							this.rateForm = {
								dataMemberIndividualRate: val.dataMemberIndividualRate,
								dataMemberEnterpriseRate: val.dataMemberEnterpriseRate,
								dataMemberSchoolRate: val.dataMemberSchoolRate,
								chooseAdjustIndividualRate: val.chooseAdjustIndividualRate,
								chooseAdjustEnterpriseRate: val.chooseAdjustEnterpriseRate,
								chooseAdjustCommonRate: val.chooseAdjustCommonRate,
								chooseAdjustUpmarketRate: val.chooseAdjustUpmarketRate,
								advertisingSharingRate: val.advertisingSharingRate
							}
						})
					}
					this.showMemberRate = true


				} else if (item.title.indexOf('下级') != -1) {
					this.showMemberLayer = false
					uni.navigateTo({
						url: `/pages/mine/extend/userExtendList/userExtendList?name=${this.chooseMember.nickname}&userId=${this.chooseMember.userId}`
					})
				}
			},
			cancelOper() {
				this.chooseMember = ''
				this.showMemberLayer = false
			},
			// 添加下属
			addNew() {
				Object.assign(this.$data.rateForm, this.$options.data().rateForm)
				this.showMemberRate = true
			},
			// 取消添加下属
			cancelClick() {
				this.isEdit = false
				this.showMemberRate = false
				this.disabled = false;
			},
			// 添加下属的确定事件
			sureClick() {
				if (!(mobile.test(this.tel))) {
					uni.showToast({
						icon: 'none',
						title: '请填写标准手机号'
					})
					return
				}
				let param = {
					"showInfo": 0,
					costRateList: [{
						...this.rateForm,
						project_id: 1,
						checked: false
					}]
				}

				let api;
				if (this.isEdit) {
					param.phoneNumber = this.chooseMember.phoneNumber,
						param.id = this.chooseMember.id
					api = editRate;
					param.userId = this.chooseMember.userId
				} else {
					param.phoneNumber = this.tel
					api = addMember;
				}
				api(param).then((res) => {
					if (res.code == 100000) {
						uni.showToast({
							title: '添加成功！',
							icon: 'none'
						});
						setTimeout(() => {
							this.isEdit = false
							this.showMemberRate = false
							this.initPage()
							this.getList()
						}, 1000)
					}
				})

			},
			downloadClick(type, url) {
				// 小程序判断有没有授权保存图片
				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: (succ) => {
						this.savePic(url)
					},
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '检测到您拒绝了相册的授权，是否前去设置打开？',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success(res) {
										}
									});
								} else if (res.cancel) {
								}
							}
						});
					}
				})
				// #endif
				// #ifdef APP-PLUS
				let permisionStr = ''
				if (uni.getStorageSync('systemInfo').platform == 'ios') {
					permisionStr = 'photoLibrary'
				} else {
					permisionStr = 'android.permission.WRITE_EXTERNAL_STORAGE'
				}
				requestAndroidPermission(permisionStr).then((status) => {
					if (status !== 1 || status === false) {
						return
					}
					this.savePic(url)
				})
				// #endif
			},
			savePic(url) {
				// 保存图片
				uni.getImageInfo({
					src: url,
					success: (image) => {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
							},
							fail(err) {
								uni.showToast({
									title: '保存失败,请检查是否授予相册权限',
									icon: 'none'
								})
							}
						});
					},
					fail() {

					}
				});
			}
		},
		onReachBottom() {
			if (this.scrollId == 4) return;
			if (this.page < this.pageTotal) {
				++this.page
				this.getList()
			} else {
				if (this.scrollId != 1) {
					uni.showToast({
						title: '我也是有底线的',
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: $pageBgColor;
	}
</style>
<style lang="scss" scoped>
	.extend {
		padding: 0 0 120rpx;
		box-sizing: border-box;
	}

	.scrollView {
		white-space: nowrap;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: sticky;
		z-index: 10;
		/* #ifdef MP || APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		background: #fff;
	}

	.scrollItem {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 15rpx;
		margin: 0 15rpx;
		text-align: center;
		position: relative;
	}

	.activeScroll::after {
		content: '';
		display: block;
		position: absolute;
		height: 8rpx;
		width: 100%;
		left: 0;
		bottom: 0;
		background: $colorMain;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .15);
	}

	.member,
	.extendUser,
	.onlyMe {
		box-sizing: border-box;

		.memberOne {
			background: #fff;
			padding: 30rpx;
			margin: 20rpx 0 0;
			box-sizing: border-box;

			.colorMain {
				flex: 0 0 30%;
				color: #FF9900 !important;
			}
		}

		.memberOne:last-child {
			border-bottom: none;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin: 0 20rpx 0 0;
		}

		.tel {
			margin: 10rpx 0 0;
		}
	}

	.onlyMe {
		background: $pageBgColor;
		padding: 50rpx;
		box-sizing: border-box;

		.copyInviteCode {
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			background: #fff;

			&>.flex {
				margin: 0 auto;

				&>view {
					height: 80rpx;
					line-height: 80rpx;
				}

				&>view:first-child {
					border: 1px solid $bordercolor;
					border-radius: 40rpx 0 0 40rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				&>view:last-child {
					border: 1px solid $bordercolor;
					border-radius: 0 40rpx 40rpx 0;
					padding: 0 20rpx;
					box-sizing: border-box;
					border-left: none;
					background: $colorMain;
				}
			}
		}

		.ownerCode {
			margin: 30rpx 0 0;
			background: #fff;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			text-align: center;

			image {
				width: 160rpx;
				height: 160rpx;
				display: block;
				margin: 0 auto 10rpx;
			}
		}

		.poster {
			margin: 30rpx 0 0;
			box-sizing: border-box;
			text-align: center;

			.noWidthBtn {
				padding: 15rpx 50rpx;
				width: 60%;
				margin: 20rpx auto 0;
			}

			.posterBox {
				margin: 30rpx 0 0;
				overflow-x: scroll;

				.posterOne {
					position: relative;
					margin: 0 20rpx 0 0;

					image {
						width: 332rpx;
						height: 592rpx;
						display: block;
					}

					.circle {
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, .35);
						left: 0;
						top: 0;
						text-align: right;
					}
				}
			}
		}

	}

	.score {
		box-sizing: border-box;

		.scoreOne {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			margin: 20rpx 0 0;

			.scoreRate {
				margin: 20rpx 0 0;
				background: $pageBgColor;

				&>view {
					flex: 1;
					text-align: center;
					box-sizing: border-box;
					border-right: 1px dashed #e0e0e0;
					height: 110rpx;
				}

				&>view:last-child {
					border-right: none;
				}

				&>.flex {
					&>view {
						width: 100%;
					}

					.font12 {
						margin: 10rpx 0 0;
					}
				}
			}
		}

		.avatar {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin: 0 20rpx 0 0;
		}

		.scoreRate {
			border: 1px dashed #e0e0e0;
		}
	}

	.nowMoney {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 0 30rpx;
		height: 120rpx;
		box-sizing: border-box;
		text-align: right;
		box-shadow: 0 0px 10rpx rgba(0, 0, 0, .15);
	}

	.memberLayer,
	.memberRate {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 0;
		z-index: 20;
		background: rgba(0, 0, 0, .35);

		.memberOperMain {
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			text-align: center;
			border-radius: 40rpx 40rpx 0 0;

			&>view {
				padding: 30rpx 0;
				border-bottom: 1px solid $bordercolor;
			}

			.cancel {
				border-top: 20rpx solid $bordercolor;
				border-bottom: none;
			}
		}

		.memberRateMain {
			border-radius: 30rpx;
			background: #fff;
			width: 80%;
			margin: 0 auto;
			padding: 50rpx 30rpx;
			box-sizing: border-box;

			.rateTitle,
			&>.colorMain {
				text-align: center;
				margin: 0 0 20rpx;
			}

			&>input {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 10rpx 0;
				box-sizing: border-box;
				border: 1px solid $bordercolor;
				background: $pageBgColor;
				border-radius: 10rpx;
			}

			.rateItem {
				border: 1px solid $bordercolor;
				margin: 0 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				background: $pageBgColor;
				padding: 0 20rpx;
				box-sizing: border-box;

				input {
					height: 80rpx;
					line-height: 80rpx;
					flex: 1;
					padding: 0 10rpx 0;
					box-sizing: border-box;
					text-align: right;
				}

				.rateTitle {
					flex-shrink: 0;
				}
			}

			.tip {
				margin: 20rpx 0;
			}

			.rateOperBox {
				margin: 30rpx 0 0;

				&>view {
					flex: 1;
					text-align: center;
				}
			}
		}
	}

	.lanmu {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*54*1px);
		margin-top: calc(var(--height)/1000*10*1px);

		.tiao {
			position: absolute;
			width: calc(var(--width)/1000*9*1px);
			height: calc(var(--height)/1000*21*1px);
			margin-top: calc(var(--height)/1000*13*1px);
			margin-left: calc(var(--width)/1000*30*1px);
			background-color: #F7DD5E;
			border-radius: calc(var(--height)/1000*10/2*1px);
		}

		.lanmutext {
			position: absolute;
			width: calc(var(--width)/1000*300*1px);
			height: calc(var(--height)/1000*31*1px);
			font-size: calc(var(--width)/1000*37*1px);
			font-weight: bold;
			margin-top: calc(var(--height)/1000*10*1px);
			margin-left: calc(var(--width)/1000*50*1px);
		}
	}

	.lanmu2 {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*54*1px);

		.tiao {
			position: absolute;
			width: calc(var(--width)/1000*9*1px);
			height: calc(var(--height)/1000*21*1px);
			margin-top: calc(var(--height)/1000*13*1px);
			margin-left: calc(var(--width)/1000*30*1px);
			background-color: #F7DD5E;
			border-radius: calc(var(--height)/1000*10/2*1px);
		}

		.lanmutext {
			position: absolute;
			width: calc(var(--width)/1000*300*1px);
			height: calc(var(--height)/1000*31*1px);
			font-size: calc(var(--width)/1000*37*1px);
			font-weight: bold;
			margin-top: calc(var(--height)/1000*10*1px);
			margin-left: calc(var(--width)/1000*50*1px);
		}
	}

	.input1 {
		width: calc(var(--width)/1000*940*1px);
		height: calc(var(--height)/1000*66*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		background-color: white;
		border-radius: 5px;
		border: 1px solid #F2F2F2;
		margin-bottom: 40rpx;

		.tu1 {
			position: absolute;
			width: calc(var(--width)/1000*56*1px);
			height: calc(var(--width)/1000*56*1px);
			margin-top: calc(var(--height)/1000*17*1px);
			margin-left: calc(var(--width)/1000*47*1px);
		}

		.input2 {
			position: absolute;
			width: calc(var(--width)/1000*700*1px);
			height: calc(var(--width)/1000*56*1px);
			margin-top: calc(var(--height)/1000*17*1px);
			margin-left: calc(var(--width)/1000*127*1px);
			font-size: calc(var(--width)/1000*33*1px);
		}

	}

	.input1tishi {
		font-size: calc(var(--width)/1000*34*1px);
		margin-top: calc(var(--height)/1000*10*1px);
		margin-left: calc(var(--width)/1000*77*1px);
		height: calc(var(--width)/1000*60*1px);
		color: #c8c8c8;

		.xing {
			color: #F7DD5E;
		}
	}

	.erweima {
		margin-left: calc(var(--width)/1000*-20*1px);

		.erweima1 {
			position: relative;
			background-color: white;
			// float: left;
			width: calc(var(--width)/1000*280*1px);
			height: calc(var(--width)/1000*280*1px);
			border-radius: 5px;
			border: solid 1px #F2F2F2;
		}

		.tu2 {
			width: calc(var(--width)/1000*60*1px);
			height: calc(var(--width)/1000*60*1px);
			// margin-top: calc(var(--height)/1000*30*1px);
			// margin-left: calc(var(--width)/1000*108*1px);
			// margin-bottom: calc(var(--height)/1000*10*1px);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.tu3 {
			width: calc(var(--width)/1000*280*1px);
			height: calc(var(--width)/1000*280*1px);
		}

		.guanbi1 {
			position: absolute;
			z-index: 1;
			margin-top: calc(var(--height)/1000*-20*1px);
			margin-left: calc(var(--width)/1000*220*1px);
			width: calc(var(--width)/1000*80*1px);
			height: calc(var(--width)/1000*80*1px);
		}

		.erweimatext {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: calc(var(--width)/1000*31*1px);
			width: calc(var(--width)/1000*280*1px);
			color: #555555;
		}

		.suo {
			position: absolute;
			width: calc(var(--width)/1000*120*1px);
			height: calc(var(--width)/1000*120*1px);
			opacity: 0.8;
			// margin-top: calc(var(--height)/1000*-100*1px);
			// margin-left: calc(var(--width)/1000*80*1px);
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.meng {
		position: absolute;
		z-index: 2;
		margin-top: calc(var(--height)/1000*-640*1px);
		width: calc(var(--width)*1px);
		height: calc(var(--height)*1px);
		background-color: #c8c8c8;

		.kuang {
			position: absolute;
			width: calc(var(--width)/1000*841*1px);
			height: calc(var(--height)/1000*800*1px);
			margin-top: calc(var(--height)/1000*80*1px);
			margin-left: calc(var(--width)/1000*80*1px);
			border-radius: 15px;
			background-color: white;

			.mengtu {
				position: absolute;
				width: calc(var(--width)/1000*50*1px);
				height: calc(var(--width)/1000*50*1px);
			}
		}
	}


	.bottomArea {
		padding-top: 10rpx;

		.money {
			color: #ff7910;
			font-size: 28rpx;
			text-align: left;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: end;

			view {
				height: 78rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left: 34rpx;
				padding-right: 34rpx;
				border-radius: 100rpx;
			}

			.record {
				background-color: #73829b;
				color: #fff;
			}

			.Withdrawal {
				margin-left: 30rpx;
				background-color: #f7de5e;
				color: #000;
			}
		}
	}

	.layer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .6);
		z-index: 100;

		.layerMain {
			background: #fff;
			width: 70%;
			margin: 30% auto 0;
			text-align: center;
			position: relative;
			// position:absolute;
			// left:0;
			// top:0;
			// bottom:0;
			// right:0;
			// margin:auto;
			padding: 60rpx 30rpx;
			box-sizing: border-box;

			.layerTitle {
				margin: 0 0 30rpx;
			}

			image {
				width: 250rpx;
				display: block;
				margin: 30rpx auto;
			}

			.noWidthBtn {
				display: inline-block;
				margin: 10rpx 0 0;
			}

			.close {
				// position:absolute;
				// left:0;
				// right:0;
				// top: 0;
				// bottom:-70rpx;
				position: relative;
				top: 140rpx;
				display: block;
			}
		}
	}

	.exit {
		background-color: #F7DD5E;
		color: #fff;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100rpx;
	}

	.meColor {
		color: #224687;
		flex: 0 0 30%;
	}



	.avatar-list {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
	}

	.along {
		height: 60rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #FFFFCC;
	}
</style>